<template>
	<view class="container">
		<view class="box-bg">
			<uni-nav-bar backgroundColor="#f5f5f5" shadow left-icon="left" title="安全支付" :border='false' :shadow='false' @clickLeft="goBack" />
		</view>
		<view class="header">
			<!-- <text class="title">安全支付</text> -->
			<text class="amount">¥60.00</text>
			<p class="time">剩余时间<uni-countdown :show-day="false" :hour="1" :minute="59" :second="59" /></p>
		</view>
		<view class="payment-methods">
			<text>请选择支付方式</text>
			<view class="method" :class="{'selected': selectedMethod === 'alipay'}">
				<text>支付宝支付</text>
				<label class="radio">
					<radio value="r2" name="1" />
				</label>
			</view>
			<view class="method" :class="{'selected': selectedMethod === 'wechat'}">
				<text>微信支付</text>
				<label class="radio">
					<radio value="r2" name="1" />
				</label>
			</view>
			<view class="method" :class="{'selected': selectedMethod === 'ccb'}">
				<text>建行龙支付</text>
				<label class="radio">
					<radio value="r2" name="1" />
				</label>
			</view>
			<view class="method" :class="{'selected': selectedMethod === 'cmb'}">
				<text>招商银行一网通</text>
				<label class="radio">
					<radio value="r2" name="1" />
				</label>
			</view>
			<view class="method" :class="{'selected': selectedMethod === 'mogu'}">
				<text>小默金币</text>
				<label class="radio">
					<radio value="r1" checked="true" />
				</label>
			</view>
		</view>
		<view class="discount">
			<text class="discount-text">减¥2.98</text>
			<!-- <text class="discount-info">自动按比例（30000:1）计算可用金币为人民币，最多可抵扣10%。</text> -->
		</view>
		<view class="new-user-reward">
			<text>新人首单奖励5元代金券</text>
		</view>
		<button class="pay-button" @click="go">立即支付 ¥57.02</button>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';


	const goBack = () => {
		uni.navigateBack({
			delta: 1
		})
	}

	function go() {
		uni.navigateTo({
			url:"/pagesA/success/success"
		})
	}
</script>

<style>
	.container {
		/* padding: 0px 16px; */
	}

	.header {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 16px;
	}

	.time {
		display: flex;
	}

	.title {
		font-size: 18px;
		font-weight: bold;
	}

	.amount {
		font-size: 40px;
		color: #ff4d4f;
		margin: 10px;
	}

	.timer {
		font-size: 14px;
		color: #999;
	}

	.payment-methods {
		margin-bottom: 16px;
	}

	.method {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px 0;
		border-bottom: 1px solid #eee;
	}

	.method.selected {
		color: #ff4d4f;
	}

	.discount {
		display: flex;
		align-items: center;
		margin-bottom: 16px;
		position: relative;
	}

	.discount-text {
		position: fixed;
		bottom: 305px;
		right: 60px;
	}

	.discount-info {
		width: 100px;
		margin-left: 8px;
		font-size: 12px;
		color: #999;
		background: yellow;
		position: absolute;
		right: 10px;
		top: 50px;
		z-index: 9;
	}

	.new-user-reward {
		margin-bottom: 16px;
		font-size: 14px;
		color: white;
		position: fixed;
		bottom: 55px;
		right: 15px;
		border-radius: 5px;
		z-index: 9;
		background: linear-gradient(270deg, rgba(250, 205, 145, 1) 0%, rgba(253, 251, 245, 1) 52%, rgba(250, 205, 145, 1) 100%);
		color: black;
		padding: 0px 5px;
	}

	.pay-button {
		width: 100%;
		padding: 8px 12px;
		background-color: #ff4d4f;
		color: white;
		border: none;
		border-radius: 4px;
		font-size: 16px;
		margin-top: 200px;
	}
</style>